import CloseIcon from './icons/CloseIcon';

const Tag = (props) => {
   const {
      children,
      showClose = false,
      onClose = undefined,
      className = '',
      type = 'default',
      ...rest
   } = props;
   let cls = 'px-1.5 py-0.5 rounded-lg text-xs inline-block relative inline-flex items-center';

   switch (type) {
      case 'primary':
         cls += ' bg-main text-white';
         break;
      case 'danger':
         cls += ' bg-red-500 text-white';
         break;
      case 'pass':
         cls += ' bg-green-500 text-white';
         break;
      default:
         cls += ' bg-stone-200';
         break;
   }

   cls = cls + ' ' + className;
   return (
      <div className={cls} {...rest}>
         {showClose && (
            <CloseIcon
               size={8}
               type="white"
               className="absolute -right-2 -top-1 bg-red-500 rounded-full p-[3px]"
               onClick={props.onClose}
            />
         )}

         {children}
      </div>
   );
};

export default Tag;
